/** *通用形列表-列表部分 */
<template>
    <el-table-column
        v-for="(item1, index1) in tableColumn"
        :key="`${item1.tableLabel}-${index1}`"
        :prop="item1.tableProp"
        :label="item1.tableLabel"
        :width="item1.tableWidth"
        :min-width="item1.tableMinWidth"
        :show-overflow-tooltip="item1.tableShowOverflowTooltip"
        :fixed="item1.tableFixed"
        :type="item1.tableType"
        :align="item1.tableAlign"
        :header-align="item1.tableHeaderAlign"
        :selectable="item1.tableSelectable"
        :sortable="item1.tableSortable"
        :formatter="item1.tableFormatter"
        :filters="item1.tableFilters"
        :filter-method="item1.tableFilterMethod"
        :filter-placement="item1.tableFilterPlacement"
        :index="item1.tableIndex"
    >
        <template v-slot:default="scope">
            <!-- 很离谱，下面两个都得加v-if才行 -->
            <template v-if="item1.tableChildren?.length > 0">
                <GeneralTableListColumn
                    v-if="item1.tableChildren?.length > 0"
                    :key="`${item1.tableLabel}-children-${index1}`"
                    v-model:tableObj="tableObj"
                    v-model:tableColumn="item1.tableChildren"
                />
            </template>
            <!-- 判断不同情况 -->
            <!-- <div v-if="scope.row[item1.tableProp]">{{ scope.row[item1.tableProp] }}</div> -->
            <div v-else-if="item1.tableContentType != 'select' && item1.tableContentSelectOptions">
                <GeneralOptionValue :options="item1.tableContentSelectOptions" :value="scope.row[item1.tableProp]" />
            </div>
            <div v-else-if="item1.tableContentType != 'select' && item1.tableContentSelectDictionary">
                <GeneralOptionValue
                    :dictionary="item1.tableContentSelectDictionary"
                    :value="scope.row[item1.tableProp]"
                />
            </div>
            <!-- 按钮内容 -->
            <template v-else-if="item1.tableContentType == 'button'">
                <el-button
                    v-for="(item2, index2) in item1.tableContentButtons"
                    :type="item2.tableContentButtonType"
                    :plain="item2.tableContentButtonPlain"
                    :round="item2.tableContentButtonRound"
                    :circle="item2.tableContentButtonCircle"
                    :icon="item2.tableContentButtonIcon"
                    :disabled="item2.tableContentButtonDisabled(scope)"
                    :text="item2.tableContentButtonText"
                    :link="item2.tableContentButtonLink"
                    :bg="item2.tableContentButtonBg"
                    :loading="item2.tableContentButtonLoading"
                    :loading-icon="item2.tableContentButtonLoadingIcon"
                    :color="item2.tableContentButtonColor"
                    :dark="item2.tableContentButtonDark"
                    @click.stop="item2.tableContentButtonClick(scope)"
                >
                    {{ item2.tableContentButtonMainText }}
                </el-button>
            </template>
            <template v-else-if="item1.tableContentType == 'text'">
                <span
                    style="box-sizing: border-box; padding: 1vw; border-radius: 40%; color: #fff"
                    :style="{
                        background: item1.tableContentTextBg(scope) ? item1.tableContentTextBg(scope) : '#409eff',
                    }"
                >
                    {{ scope.row[item1.tableProp] }}
                </span>
            </template>
            <template v-else-if="item1.tableContentType == 'image'">
                <!-- 图片最后都是base64的 -->
                <template
                    v-if="scope.row[item1.tableProp] && scope.row[item1.tableProp].includes('data:image/;base64')"
                >
                    <el-carousel
                        :autoplay="false"
                        trigger="click"
                        indicator-position="none"
                        :style="{ height: item1.tableContentImageHeight ? item1.tableContentImageHeight : '10vw' }"
                    >
                        <el-carousel-item
                            v-for="(item2, index2) in scope.row[item1.tableProp].split('-----iamge-----')"
                            :key="`${item1.tableLabel}-${item1.tableContentType}-${index2}`"
                        >
                            <el-image
                                style="width: 100%; height: 100%"
                                :src="item2"
                                :preview-src-list="scope.row[item1.tableProp].split('-----iamge-----')"
                                :initial-index="index2"
                                fit="cover"
                                loading="lazy"
                                preview-teleported
                            ></el-image>
                        </el-carousel-item>
                    </el-carousel>
                </template>
                <div
                    v-else
                    :style="{ height: item1.tableContentImageHeight ? item1.tableContentImageHeight : '10vw' }"
                ></div>
            </template>
            <template v-else-if="item1.tableContentType == 'input'">
                <el-form-item
                    label-width="0"
                    :prop="`${tableObj.tableFormItemProp}[${scope.$index}].${item1.tableProp}`"
                    :rules="item1.tableContentRules"
                    class="general-table-list-column-el-form-item"
                >
                    <el-input
                        v-model="scope.row[item1.tableProp]"
                        :type="item1.tableContentInputType"
                        :maxlength="item1.tableContentInputMaxLength"
                        :disabled="item1.tableContentDisabled"
                        :placeholder="`请输入${item1.tableLabel}`"
                        clearable
                    />
                </el-form-item>
            </template>
            <template v-else-if="item1.tableContentType == 'select'">
                <el-form-item
                    label-width="0"
                    :prop="`${tableObj.tableFormItemProp}[${scope.$index}].${item1.tableProp}`"
                    :rules="item1.tableContentRules"
                    class="general-table-list-column-el-form-item"
                >
                    <GeneralSelect
                        v-model="scope.row[item1.tableProp]"
                        :multiple="item1.tableContentSelectmultiple"
                        :multipleLimit="item1.tableContentSelectMultipleLimit"
                        :collapseTags="item1.tableContentSelectCollapseTags"
                        :collapseTagsTooltip="item1.tableContentSelectcollapseTagsTooltip"
                        :placeholder="`请选择${item1.tableLabel}`"
                        clearable
                        :disabled="item1.tableContentDisabled"
                        noDataText="暂无选项"
                        :options="item1.tableContentSelectOptions"
                        :dictionary="item1.tableContentSelectDictionary"
                        :defalutOptionsIndex="item1.tableContentSelectDefalutOptionsIndex"
                    />
                </el-form-item>
            </template>
            <template v-else-if="item1.tableContentType == 'date'">
                <el-form-item
                    label-width="0"
                    :prop="`${tableObj.tableFormItemProp}[${scope.$index}].${item1.tableProp}`"
                    :rules="item1.tableContentRules"
                    class="general-table-list-column-el-form-item"
                >
                    <el-date-picker
                        v-model="scope.row[item1.tableProp]"
                        :type="item1.tableContentDateType"
                        :value-format="item1.tableContentDateValueFormat"
                        :default-value="item1.tableContentDateDefaultValue"
                        :disabled-date="item1.tableContentDateDisabledDate"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        clearable
                        :disabled="item1.tableContentDisabled"
                        :placeholder="`请选择${item1.tableLabel}`"
                        class="my-date-picker"
                    />
                </el-form-item>
            </template>
            <template v-else-if="item1.tableContentType == 'cascader'">
                <el-form-item
                    label-width="0"
                    :prop="`${tableObj.tableFormItemProp}[${scope.$index}].${item1.tableProp}`"
                    :rules="item1.tableContentRules"
                    class="general-table-list-column-el-form-item"
                >
                    <!-- cascader级联选择 -->
                    <el-cascader
                        v-model="scope.row[item1.tableProp]"
                        :options="item1.tableContentCascaderOptions"
                        :props="item1.tableContentCascaderProps"
                        :show-all-levels="item1.tableContentCascaderShowAllLevels"
                        :collapse-tags="item1.tableContentCascaderCollapseTags"
                        :collapse-tags-tooltip="item1.tableContentCascaderCollapseTagsTooltip"
                        :max-collapse-tags="item1.tableContentCascaderMaxCollapseTags"
                        :filterable="item1.tableContentCascaderFilterable"
                        clearable
                        :disabled="item1.tableContentDisabled"
                        :placeholder="`请选择${item1.tableLabel}`"
                        class="my-cascader"
                    />
                </el-form-item>
            </template>
            <template v-else-if="item1.tableContentType == 'administrativeDivisionsCascader'">
                <el-form-item
                    label-width="0"
                    :prop="`${tableObj.tableFormItemProp}[${scope.$index}].${item1.tableProp}`"
                    :rules="item1.tableContentRules"
                    class="general-table-list-column-el-form-item"
                >
                    <AdministrativeDivisionsCascader
                        v-model="scope.row[item1.tableProp]"
                        :disabled="item1.tableContentDisabled"
                    />
                </el-form-item>
            </template>
        </template>
    </el-table-column>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed, watch } from 'vue';
    import type { Ref, Raw } from 'vue';
    import {} from '@/apis';
    import { isPhone } from '@/utils';

    import { useRoute, useRouter } from 'vue-router';
    import { storeToRefs } from 'pinia';
    import { useStore } from '@/store';
    import { ElMessage } from 'element-plus';
    import { Lock, User, Monitor, Phone, Search, RefreshRight, CaretTop, CaretBottom } from '@element-plus/icons-vue';
    import GeneralTableListColumn from './GeneralTableListColumn.vue';
    import GeneralOptionValue from '@/components/generalOptionValue/GeneralOptionValue.vue';

    import { getUploadImageApi } from '@/apis';

    const route = useRoute();
    const router = useRouter();
    const store = useStore();

    const tableObj = defineModel<any>('tableObj', {
        required: false,
        default: {
            tableData: [],
            tableColumn: [],
        },
    });
    const tableColumn = defineModel<any>('tableColumn', {
        required: false,
        default: [],
    });
    // const props = withDefaults(defineProps<{
    //     tableColumn?: any[],
    // }>(), {
    //     tableColumn: () => [],
    // })
    watch(
        [tableColumn, () => tableObj.value.tableData],
        (nval, oval) => {
            console.log(tableColumn.value);
            if (tableColumn.value) {
                let fun = () => {
                    tableColumn.value.forEach((item1: any, index1) => {
                        if (item1.tableContentType == 'image') {
                            tableObj.value.tableData.forEach((item2: any, index2) => {
                                if (item2[item1.tableProp]) {
                                    let res1 = [];
                                    item2[item1.tableProp].split(',').forEach(async (item3: any, index3) => {
                                        let res2: any = await getUploadImageApi(item3, {}, false, false);
                                        console.log(res2);
                                        res1.push(res2.data);
                                        if (index3 == item2[item1.tableProp].split(',').length - 1) {
                                            item2[item1.tableProp] = res1.join('-----iamge-----');
                                        }
                                    });
                                }
                            });
                        }
                    });
                };
                fun();
            }
        },
        {
            immediate: true,
        }
    );
    const emits = defineEmits<{
        // (e: 'update:isCollapse', data: boolean): void,
        // 'tableSearch': [data: any]
    }>();
</script>

<style lang="scss" scoped>
    .my-table {
        width: 100%;
    }
    // tableRowClassName写的自定义样式
    .my-table :deep(.warning-row) {
        --el-table-tr-bg-color: var(--el-color-warning-light-9);
    }
    .my-table :deep(.success-row) {
        --el-table-tr-bg-color: var(--el-color-success-light-9);
    }
    .general-table-list-column-el-form-item {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
</style>
